<template>
  <div class="main-page">
    <div class="page-title"></div>
    <div class="main-content">
      <el-row :gutter="30" style="height: calc(100vh - 144px)">
        <el-col :span="8">
          <div class="housing-enterprise-index-analysis">
            <div class="public-module-title">企业指数分析</div>
            <div class="housing-enterprise-index-analysis-bottom">
              <div class="housing-enterprise-index-analysis-filtrate">
                <el-autocomplete
                    class="housing-enterprise-index-analysis-filtrate-autocomplete"
                    v-model="housingEnterpriseIndexAnalysisForm.housingEnterpriseName"
                    :fetch-suggestions="housingEnterpriseNameSearchRemoteMethod"
                    placeholder="请输入企业名称"
                    clearable
                >
                  <template #prepend>
                    <el-image style="width: 20px; height: 20px" :src="autocompletePrependLogo" fit="fill"/>
                  </template>
                </el-autocomplete>
                <el-select v-model="housingEnterpriseIndexAnalysisForm.analysisType" @change="handleAnalysisType">
                  <el-option
                      v-for="item in housingEnterpriseIndexAnalysisForm.analysisTypeSelectList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                  />
                </el-select>
                <el-button color="blue" @click="handleAnalysis">分析</el-button>
              </div>
              <div class="housing-enterprise-index-analysis-content">
                <div class="housing-enterprise-index-analysis-content-item"
                     @click="chooseHousingEnterpriseIndexAnalysisBar(index)"
                     :class="{'is-active': index === housingEnterpriseIndexAnalysisForm.currentHousingEnterpriseIndexAnalysisBarIndex}"
                     v-for="(item, index) of housingEnterpriseIndexAnalysisForm.housingEnterpriseIndexAnalysisList"
                     :key="index">
                  <div class="bar-label">{{ item.kfsmc }}</div>
                  <div class="bar">
                    <div class="bar-item"
                         :style="{ width: `${(item.value / housingEnterpriseIndexAnalysisMax) * 100}%` }"></div>
                  </div>
                  <span>{{ item.value }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="whole-province-housing-enterprise-credit-anomaly-statistics">
            <div class="public-module-title">全省企业信用的异常统计</div>
            <div class="whole-province-housing-enterprise-credit-anomaly-statistics-bottom">
              <pie
                  v-if="wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData.seriesData?.length"
                  ref="wholeProvinceHousingEnterpriseCreditAnomalyStatistics"
                  :pieData="wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData"
                  class="h388"
                  @click="fullSc('pie', wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData)"
              ></pie>
            </div>
          </div>
        </el-col>
        <el-col :span="16">
          <div class="enterprise-credit-detail">
            <div class="public-module-title enterprise-credit-detail-module-title">{{ housingEnterpriseIndexAnalysisForm.housingEnterpriseName }}企业信用详情</div>
            <div class="enterprise-credit-detail-content">
              <el-row :gutter="30">
                <el-col :span="12">
                  <div class="enterprise-objective-credit-ability-analysis">
                    <div class="enterprise-credit-detail-public-module-title">企业客观信用能力分析</div>
                    <div class="enterprise-objective-credit-ability-analysis-year-level-item" v-for="item of enterpriseObjectiveCreditAbilityAnalysis.yearLevelList" :key="item.id">
                      <el-image :src="item.imgUrl" fit="fill"/>
                      <div class="right-content">
                        <div class="label">{{item.label}}</div>
                        <div class="value">{{enterpriseCreditDetailInfo[item.valueKey] || '--'}}{{item.unit}}</div>
                      </div>
                    </div>
                    <div class="enterprise-objective-credit-ability-analysis-area-person-ability">
                      <div class="enterprise-objective-credit-ability-analysis-area-person-ability-item" v-for="item of enterpriseObjectiveCreditAbilityAnalysis.areaPersonAbilityList" :key="item.id">
                        <div class="label">{{item.label}}</div>
                        <div class="value">{{enterpriseCreditDetailInfo[item.valueKey] || '--'}}</div>
                      </div>
                    </div>
                  </div>
                  <div class="enterprises-fulfilling-social-responsibility-credit-analysis">
                    <div class="enterprise-credit-detail-public-module-title">企业履行社会责任信用分析</div>
                    <div class="enterprises-fulfilling-social-responsibility-credit-analysis-item">
                      <el-row :gutter="20" v-for="item of enterprisesFulfillingSocialResponsibilityCreditAnalysisList">
                        <el-col :span="12" v-for="colItem of item">
                          <div class="col-item">
                            <div class="label">{{colItem.label}}</div>
                            <div class="value">{{enterpriseCreditDetailInfo[colItem.valueKey] || '--'}}</div>
                          </div>
                        </el-col>
                      </el-row>
                    </div>
                  </div>
                </el-col>
                <el-col :span="12">
                  <div class="business-operation-credit-condition-analysis">
                    <div class="enterprise-credit-detail-public-module-title">企业经营信用情况分析</div>
                    <business-operation-credit-condition-analysis-module style="margin-top: 25px;" :dataList="enterpriseDevelopEarlyCreditList" :dataInfo="enterpriseCreditDetailInfo" title="企业开发前期信用"></business-operation-credit-condition-analysis-module>
                    <business-operation-credit-condition-analysis-module style="margin-top: 25px;" :dataList="constructionCreditList" :dataInfo="enterpriseCreditDetailInfo" title="建设阶段信用"></business-operation-credit-condition-analysis-module>
                    <business-operation-credit-condition-analysis-module style="margin-top: 25px;" :dataList="leaseSaleStageCreditList" :dataInfo="enterpriseCreditDetailInfo" title="租售阶段信用"></business-operation-credit-condition-analysis-module>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-dialog v-model="magnifyData.dialogVisible" :width="magnifyData.dialogWidth" :top="magnifyData.dialogTop">
      <component
          v-if="magnifyData.dialogVisible"
          ref="dialogRef"
          :is="magnifyData.componentName"
          :dialogData="{fontSizeTimes: 2}"
          v-bind="{...magnifyData.props}"
      ></component>
    </el-dialog>
  </div>
</template>

<script>
import pie from "@/components/enterpriseCreditAnalysis/pie.vue";

export default {
  components: {
    pie
  }
}
</script>

<script setup>
import {onMounted, ref, computed} from "vue";

import {
  getCorporateCreditRealEstateMetrics, // 房企指数分析
  getCorporateCreditSearchDevelopers, // 开发商联想搜索-远程搜索
  getCorporateCreditAbnormalCreditStats, // 全省房企信用的异常统计
  getCorporateCreditCorporateCreditDetail // 企业信用详情
} from "@/api/enterpriseCreditAnalysis";

import businessOperationCreditConditionAnalysisModule from "@/components/enterpriseCreditAnalysis/businessOperationCreditConditionAnalysisModule.vue";

import autocompletePrependLogo from '@/assets/img/enterpriseCreditAnalysis/autocomplete-prepend-logo.png'
import businessLife from '@/assets/img/enterpriseCreditAnalysis/business-life.png'
import bankCreditRating from '@/assets/img/enterpriseCreditAnalysis/bank-credit-rating.png'

const magnifyData = ref({ // chart图放大data
  dialogVisible: false,
  componentName: '',
  componentParams: {},
  dialogWidth: '',
  props: {},
  dialogTop: ''
})

const housingEnterpriseIndexAnalysisForm = ref({ // 房企指数分析-form
  housingEnterpriseName: '', // 房企名称
  analysisType: 1, // 指数分析类型
  analysisTypeSelectList: [ // 指数分析类型select-list
    {
      label: '企业经营业绩-成交率',
      value: 1
    },
    {
      label: '企业经营业绩-退单率',
      value: 2
    },
    {
      label: '政府业务审批通过率',
      value: 3
    },
    {
      label: '消费者评价数',
      value: 4
    },
    {
      label: '惩罚或奖励数',
      value: 5
    },
    {
      label: '消费者投诉数',
      value: 6
    },
    {
      label: '舆论评价数',
      value: 7
    },
    {
      label: '整改情况数',
      value: 8
    },
  ],
  housingEnterpriseIndexAnalysisList: [], // 房企指数分析-bar图
  currentHousingEnterpriseIndexAnalysisBarIndex: 0 // 当前选中的房企指数分析-bar
})

const wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData = ref({ // 全省房企信用的异常统计-data
  seriesData: []
})
const wholeProvinceHousingEnterpriseCreditAnomalyStatistics = ref(null) // 全省房企信用的异常统计-domref

const enterpriseObjectiveCreditAbilityAnalysis = ref({ // 企业客观信用能力分析
  yearLevelList: [
    {
      id: 1,
      label: '企业经营年限',
      unit: '年',
      imgUrl: businessLife,
      valueKey: 'qyjynx'
    },
    {
      id: 2,
      label: '银行资信等级',
      unit: '级',
      imgUrl: bankCreditRating,
      valueKey: 'yhzxdj'
    },
  ],
  areaPersonAbilityList: [
    {
      id: 1,
      label: '近三年开发面积',
      valueKey: 'jsnkfmj'
    },
    {
      id: 2,
      label: '高级职称人员数',
      valueKey: 'gjzcrys'
    },
    {
      id: 3,
      label: '财务信用能力',
      valueKey: 'cwxynl'
    },
  ],
})
const enterpriseCreditDetailInfo = ref({}) // 企业信用详情-obj
const enterprisesFulfillingSocialResponsibilityCreditAnalysisList = ref([ // 企业履行社会责任信用分析
    [
      {
        id: 1,
        label: '企业对消费者信用',
        valueKey: 'qydxfzxy'
      },
      {
        id: 2,
        label: '企业对合作方信用',
        valueKey: 'qydhzfxy'
      }
    ],
    [
      {
        id: 3,
        label: '企业对政府信用',
        valueKey: 'qydzfxy'
      },
      {
        id: 4,
        label: '社会荣誉',
        valueKey: 'shry'
      }
    ]
])
const enterpriseDevelopEarlyCreditList = ref([ // 企业开发前期信用
  [
    {
      label: '土地运作信用:',
      valueKey: 'tdyzxy'
    },
    {
      label: '工程招标信用:',
      valueKey: 'gczbxy'
    }
  ],
  [
    {
      label: '规划许可信用:',
      valueKey: 'ghxkxy'
    }
  ],
  [
    {
      label: '参与保障房建设信用:',
      valueKey: 'cybzfjsxy'
    }
  ]
])
const constructionCreditList = ref([ // 建设阶段信用
  [
    {
      label: '合同信用:',
      valueKey: 'htxy'
    },
    {
      label: '进度信用:',
      valueKey: 'jdxy'
    }
  ],
  [
    {
      label: '质量信用:',
      valueKey: 'zlxy'
    },
    {
      label: '安全信用:',
      valueKey: 'aqxy'
    }
  ],
  [
    {
      label: '竣工验收信用:',
      valueKey: 'jgysxy'
    }
  ]
])
const leaseSaleStageCreditList = ref([ // 租售阶段信用
  [
    {
      label: '租售推广信用:',
      valueKey: 'zstgxy'
    },
    {
      label: '预售信用:',
      valueKey: 'ysxy'
    }
  ],
  [
    {
      label: '销售信用:',
      valueKey: 'xsxy'
    },
    {
      label: '合同履约信用:',
      valueKey: 'htlyxy'
    }
  ],
  [
    {
      label: '租赁履约信用:',
      valueKey: 'zllyxy'
    },
    {
      label: '企业物业信用:',
      valueKey: 'qywyxy'
    }
  ]
])

const housingEnterpriseIndexAnalysisMax = computed(() => { // 房企指数分析-bar-value最大值
  const tempValueList = housingEnterpriseIndexAnalysisForm.value.housingEnterpriseIndexAnalysisList.map(x => x.value)
  return Math.max(...tempValueList)
})

const housingEnterpriseNameSearchRemoteMethod = (query, cb) => { // 房企名称-远程搜索
  getCorporateCreditSearchDevelopers({fqmc: query}).then(res => {
    const resData = res?.data
    if (resData?.length) {
      const tempList = resData.map(x => {
        return {
          value: x
        }
      })
      cb(tempList)
    } else {
      cb([])
    }
  }).catch(error => {
    console.log(error);
    cb([])
  })
}

const handleAnalysis = () => { // 指数分析按钮-submit
  getHousingEnterpriseIndexAnalysisData(housingEnterpriseIndexAnalysisForm.value.housingEnterpriseName);
}

const getHousingEnterpriseIndexAnalysisData = (chooseOption) => { // 获取房企指数分析bar数据
  getCorporateCreditRealEstateMetrics({requestType: housingEnterpriseIndexAnalysisForm.value.analysisType}).then(res => {
    const resData = res?.data
    if (resData?.length) {
      if (chooseOption) {
        housingEnterpriseIndexAnalysisForm.value.housingEnterpriseIndexAnalysisList = resData?.filter(x => x.kfsmc === chooseOption) || []
        housingEnterpriseIndexAnalysisForm.value.currentHousingEnterpriseIndexAnalysisBarIndex = 0
      } else {
        housingEnterpriseIndexAnalysisForm.value.housingEnterpriseIndexAnalysisList = resData
      }
      getEnterpriseCreditDetail();
    }
  }).catch(error => {
    console.log(error);
  })
}

const getWholeProvinceHousingEnterpriseCreditAnomalyStatisticsData = (chooseOption) => { // 全省房企信用的异常统计
  getCorporateCreditAbnormalCreditStats().then(res => {
    const resData = res?.data
    wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData.value.seriesData = []
    if (resData?.length) {
      resData.forEach(x => {
        wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData.value.seriesData.push({
          name: x.yclx,
          value: x.fqsl
        })
      })
      wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData.value.seriesData.push({
        name: '履约风险',
        value: 3
      })
      wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData.value.seriesData.push({
        name: '投诉举报风险',
        value: 4
      })
      wholeProvinceHousingEnterpriseCreditAnomalyStatisticsData.value.seriesData.push({
        name: '销售许可风险',
        value: 5
      })
    }
  }).catch(error => {
    console.log(error);
  })
}

const getEnterpriseCreditDetail = () => { // 获取企业信用详情
  getCorporateCreditCorporateCreditDetail({
    fqmc: housingEnterpriseIndexAnalysisForm.value.housingEnterpriseIndexAnalysisList[housingEnterpriseIndexAnalysisForm.value.currentHousingEnterpriseIndexAnalysisBarIndex]?.kfsmc || ''
  }).then(res => {
    const resData = res?.data
    if (resData) {
      enterpriseCreditDetailInfo.value = resData
    }
  }).catch(error => {
    console.log(error);
  })
}

const chooseHousingEnterpriseIndexAnalysisBar = (index) => { // 切换房企指数分析type
  housingEnterpriseIndexAnalysisForm.value.currentHousingEnterpriseIndexAnalysisBarIndex = index
  getEnterpriseCreditDetail();
}

const handleAnalysisType = (val) => { // 切换房企指数分析-分析类型(select)
  getEnterpriseCreditDetail();
}

const fullSc = (componentName, componentParams) => { // 放大chart图
  magnifyData.value.dialogTop = '25vh';
  magnifyData.value.dialogVisible = true;
  magnifyData.value.componentName = componentName;
  switch (componentName) {
    case 'pie': // 全省房企信用的异常统计-pie图
      magnifyData.value.props = {
        pieData: componentParams,
        class: 'h388 dialog-h388'
      };
      magnifyData.value.dialogWidth = '50%';
      break;
  }
}

const initPage = () => { // 初始化页面
  getHousingEnterpriseIndexAnalysisData(); // 房企指数分析
  getWholeProvinceHousingEnterpriseCreditAnomalyStatisticsData(); // 全省房企信用的异常统计
}

onMounted(() => {
  initPage()
})
</script>

<style scoped lang="less">
.common-text-gradient {
  /* 设置背景为线性渐变 */
  background: linear-gradient(to bottom, #FFFFFF, #ECAE69);
  /* 将文字设置为透明，以显示背景渐变色 */
  color: transparent;
  /* 使用背景渐变色来填充文字 */
  -webkit-background-clip: text;
  background-clip: text;
}
.main-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/housePropertyAnalysis/statistics/page-bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: hidden;

  .page-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 17px;
    background: url("@/assets/img/enterpriseCreditAnalysis/top-title.png");
    background-size: 100% 100%;
    font-family: PingFang SC, PingFang SC;
    font-weight: 400;
    font-size: 48px;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .main-content {
    margin-top: 42px;

    .housing-enterprise-index-analysis {
      margin-left: 20px;
      width: 100%;

      .housing-enterprise-index-analysis-bottom {
        background-color: #0C2339;
        padding: 14px 15px;
        box-sizing: border-box;

        .housing-enterprise-index-analysis-filtrate {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 10px 5px 0;
          background-color: #0C2339;

          /deep/ .el-autocomplete {
            width: 40%;

            .el-input-group__prepend {
              padding: 0 5px;
              background: linear-gradient(180deg, #0C1F2F 0%, #19426A 100%);
              border-radius: 3px 0 0 3px;
              border: 1px solid #6298C8;
              border-right: 0;
            }

            .el-input__wrapper {
              background: linear-gradient(180deg, #0C1F2F 0%, #19426A 100%);
              border-radius: 0 3px 3px 0;
              border: 1px solid #6298C8;
              border-left: 0;

              .el-input__inner {
                color: white;
              }
            }
          }
        ;

          /deep/ .el-select {
            width: 40%;

            .el-select__wrapper {
              background: linear-gradient(180deg, #0C1F2F 0%, #19426A 100%);
              border-radius: 0 3px 3px 0;
              border: 1px solid #6298C8;

              .el-select__selected-item {
                color: white;
              }
            }
          }

          button {
            background-color: #143655;
            border: none;
            color: #27F6F9;
          }
        }

        .housing-enterprise-index-analysis-content {
          padding-top: 20px;
          background-color: #0C2339;
          height: 320px;
          overflow-y: auto;

          &-item {
            display: flex;
            align-items: center;
            cursor: pointer;
            font-size: 16px;

            .bar-label {
              width: 50px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap
            }

            .bar {
              display: flex;
              align-items: center;
              position: relative;
              overflow: hidden;
              width: 75%;
              height: 20px;
              margin-left: 20px;
              background-color: #23374A;

              .bar-item {
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                background: linear-gradient(90deg, #27F8FC 0%, #0271BC 100%);
              }
            }

            > span:last-child {
              margin-left: 30px;
            }
          }

          &-item.is-active {
            color: #27F6F9;
          }

          &-item:not(:last-child) {
            margin-bottom: 20px;
          }
        }
      }
    }

    .whole-province-housing-enterprise-credit-anomaly-statistics {
      margin: 28px 0 0 10px;
      width: 100%;

      .whole-province-housing-enterprise-credit-anomaly-statistics-bottom {
        margin-top: 8px;
        background-color: #0C2339;
        padding: 14px 15px;
        box-sizing: border-box;
        height: 388px;
      }
    }

    .enterprise-credit-detail {
      margin-right: 20px;
      .enterprise-credit-detail-content {
        width: 100%;
        height: 878px;
        background: rgba(12,35,57,0.8);
        margin-top: 8px;
        box-sizing: border-box;
        padding: 11px 24px;
        .enterprise-objective-credit-ability-analysis {
          .enterprise-objective-credit-ability-analysis-year-level-item {
            width: 100%;
            height: 120px;
            background: url("@/assets/img/enterpriseCreditAnalysis/module-content-bg-1.png");
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            padding: 10px 8px;
            box-sizing: border-box;
            .el-image {
              width: 156px;
              height: 100%;
            }
            .right-content {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              flex: 1;
              margin-left: 8px;
              .label {
                font-size: 24px;
              }
              .value {
                text-align: right;
                font-size: 40px;
                .common-text-gradient;
              }
            }
          }
          .enterprise-objective-credit-ability-analysis-year-level-item:nth-of-type(2) {
            margin: 15px 0;
          }
          .enterprise-objective-credit-ability-analysis-area-person-ability {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 15px;
            .enterprise-objective-credit-ability-analysis-area-person-ability-item {
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              width: 32%;
              height: 118px;
              background: url("@/assets/img/enterpriseCreditAnalysis/module-content-bg-2.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              .label {
                font-size: 20px;
                margin-bottom: 5px;
              }
              .value {
                font-size: 35px;
                .common-text-gradient;
              }
            }
          }
        }
        .enterprises-fulfilling-social-responsibility-credit-analysis {
          width: 100%;
          margin-top: 30px;
          box-sizing: border-box;
          .enterprise-credit-detail-public-module-title {
            margin-bottom: 30px;
          }
          .enterprises-fulfilling-social-responsibility-credit-analysis-item {
            width: 100%;
            .el-row:first-child {
              margin-bottom: 20px;
            }
            .col-item {
              height: 160px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: space-evenly;
              background: url("@/assets/img/enterpriseCreditAnalysis/module-content-bg-2.png");
              background-size: 100% 100%;
              background-repeat: no-repeat;
              .label {
                font-size: 25px;
              }
              .value {
                font-size: 40px;
                .common-text-gradient;
              }
            }
          }
        }
      }
    }

    .public-module-title {
      width: 100%;
      height: 50px;
      background: url("@/assets/img/enterpriseCreditAnalysis/module-title.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: white;
      font-size: 25px;
      font-weight: bold;
      text-align: left;
      line-height: 50px;
      padding-left: 40px;
      box-sizing: border-box;
    }
    .enterprise-credit-detail-module-title {
      background: url("@/assets/img/enterpriseCreditAnalysis/module-title-longer.png");
      background-repeat: no-repeat;
    }
    .enterprise-credit-detail-public-module-title {
      width: 100%;
      height: 24px;
      background: url("@/assets/img/enterpriseCreditAnalysis/detail-module-title.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      color: #29F1FA;
      font-size: 20px;
      text-align: left;
      line-height: 24px;
      padding-left: 40px;
      box-sizing: border-box;
    }
  }
}

/deep/ .el-dialog {
  background-color: rgb(6, 37, 69);

  .el-dialog__close {
    color: white;
    font-size: 25px;
  }
}
</style>